<!-- 此处是跳转订阅 -->
<template>
    <section class="component component--module cxense cxense-loading">
        <div class="column column--full">
            <div id="cx-membership-tile">
                <div id="cx-callout-tile-wrapper" class="group group--cx cx-tile">
                    <div class="block block--promo">
                        <h3 class="header">{{ props.subNowData.header }}</h3>
                        <div class="message">{{ props.subNowData.message }} <strong></strong><a class="link"
                                href="undefined"> </a></div>
                        <div class="benefits">
                        </div>
                        <div class="prompt">
                            <a class="btn btn-paywall m100">
                                {{ props.subNowData.prompt }}
                            </a>
                            <span class="login"> <a class="link log--in--btn"></a></span>
                        </div>
                    </div>
                    <div class="block block--graphic">
                        <div class="graphic">
                            <img class="img" alt="Sinopoly Watch on Multiple devices"
                                src="https://content.cxpublic.com/creatives/cede55d1d1397771999620b3bf1b3a39d2693934.png">
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
</template>
<script setup>
const props = defineProps(['subNowData'])
</script>
<style lang="scss" scoped>
#cx-membership-tile {
    width: 100%;
}

.cx-tile {
    display: flex;
    padding: 20px 10px;
    border: 1px solid #e1e1e1;
    border-top: 5px solid #3677a8;
    margin-bottom: 20px;

    .header {
        padding: 0;
        margin-bottom: 15px;
        font: 800 1.28571rem / 1.375 Mulish, sans-serif;
    }

    .message {
        font-size: 14px;
        margin-bottom: 20px;

        .link {
            color: #3677a8;
        }
    }

    .benefits {
        display: none;
    }

    .prompt {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        align-items: center;

        .btn-paywall {
            border-radius: 18px;
            color: #202020;
            background-color: #fcb839;
            padding: 0 20px;
            font-weight: 700;
            display: inline-block;
            line-height: 36px;
            font-size: 12px;
        }

        .login {
            margin-left: 10px;
            font-size: .85714rem;
            color: #939393;
            white-space: nowrap;
        }
    }
}
</style>